<template>
  <div>
    <div class="category">
      <Suspense>
        <Category :disabled="is_show_add !== 0"></Category>
        <template #fallback> 加载中请稍等... </template>
      </Suspense>
    </div>
    <div v-show="is_show_add == 0" class="container">
      <el-card>
        <el-button v-has="'btn.Spu.add'" :disabled="categoryStore.c3Id == ''" type="primary" style="margin-bottom: 20px" @click="addSpu">添加SPU</el-button>

        <!-- 表格 -->
        <el-table :data="spuTable" style="width: 100%; margin: 20px 0">
          <el-table-column type="index" label="序号" width="180" />
          <el-table-column prop="spuName" label="SPU名称" width="180" />
          <el-table-column prop="description" label="SPU描述" show-overflow-tooltip />
          <el-table-column label="SPU操作">
            <template #="{ row }">
              <el-button v-has="'btn.Spu.addsku'" type="primary" icon="Plus" title="添加SKU" circle @click="addSku(row)" />
              <el-button v-has="'btn.Spu.update'" type="primary" icon="Edit" title="修改SPU" circle @click="editSpu(row)" />
              <el-button v-has="'btn.Spu.skus'" type="primary" icon="ZoomIn" title="查看SKU列表" circle @click="watchSku(row)" />
              <el-button v-has="'btn.Spu.delete'" type="danger" icon="Delete" title="删除SPU" circle />
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination :background="true" v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 7]" layout=" prev, pager, next, jumper,->, sizes,total" :total="total" @size-change="handleSizeChange" @current-change="getSpu" />
      </el-card>
    </div>
    <div v-show="is_show_add == 1" class="add">
      <AddSPU ref="addSpuRef"></AddSPU>
    </div>
    <div class="sku" v-show="is_show_add == 2">
      <SkuForm ref="skuRef"></SkuForm>
    </div>

    <!-- 查看sku的对话框 -->
    <el-dialog v-model="dialogTableVisible" title="Shipping address">
      <el-table :data="skuData">
        <el-table-column property="skuName" label="SKU名称" width="150" />
        <el-table-column property="skuImageList" label="SKU图片" width="200">
          <template #="{ row }">
            <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column property="price" label="价格" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useCategoryStore } from '@/store/module/category'
import { defineAsyncComponent, onMounted, ref, watch } from 'vue'
import { reqHasSpu, reqSkuList } from '@/utils/api/product/spu/index'
import { SkuData, SpuData } from '@/utils/api/product/spu/type'
import { cloneDeep } from 'lodash'

const Category = defineAsyncComponent(() => import('@/components/category/Category.vue'))
const AddSPU = defineAsyncComponent(() => import('./addSpu.vue'))
const SkuForm = defineAsyncComponent(() => import('./skuForm.vue'))

const categoryStore = useCategoryStore()

const currentPage = ref<number>(1)
const pageSize = ref<number>(3)
const total = ref<number>(0)
const spuTable = ref<SpuData[]>([])
// 是否显示添加spu组件
const is_show_add = ref<number>(0)

// spu组件的ref
const addSpuRef = ref()
// sku组件的ref
const skuRef = ref()
// 查看sku对话框的显示
const dialogTableVisible = ref(false)
// sku的内容
const skuData = ref<SkuData[]>([])

onMounted(() => {
  categoryStore.get_c1_async()
})

// 获取spu数据
const getSpu = async (page = 1) => {
  currentPage.value = page
  const res = await reqHasSpu(currentPage.value, pageSize.value, categoryStore.c3Id)
  if (res.data.code == 200) {
    spuTable.value = res.data.data.records
    total.value = res.data.data.total
  }
}

// 改变每页展示条数
const handleSizeChange = (size: number) => {
  pageSize.value = size
  getSpu(currentPage.value)
}

// 添加SPU
const addSpu = () => {
  is_show_add.value = 1
}

// 将场景切换0
const change_is_show_add = () => {
  is_show_add.value = 0
}

// 修改SPU
const editSpu = (row: SpuData) => {
  addSpuRef.value.clickEdit(cloneDeep(row))
  is_show_add.value = 1
}

// 添加SKU
const addSku = (row: SpuData) => {
  skuRef.value.initData(row)
  is_show_add.value = 2
}

// 查看sku
const watchSku = async (row: SpuData) => {
  dialogTableVisible.value = true
  const res = await reqSkuList(row.id!)
  if (res.data.code == 200) {
    skuData.value = res.data.data!
  }
}

// 监听c3id的变化
watch(
  () => categoryStore.c3Id,
  c3Id => {
    if (typeof c3Id == 'number') {
      getSpu()
    }
  }
)

defineExpose({ getSpu, change_is_show_add })
</script>

<style scoped></style>
